<template>
	<view class="container">
		<!-- 页面头部 -->
		<view class="main-header">
			<!-- :style="{ height: $platform == 'H5' ? '240rpx' : '320rpx', paddingTop: $platform == 'H5' ? '0' : '50rpx' }"> -->
			<!-- <image class="bg-image" src="/static/background/user-header.png" mode="scaleToFill"></image> -->
			<!-- 用户信息 -->
			<view v-if="isLogin" class="user-info">
				<view class="user-avatar">
					<avatar-image :url="userInfo.avatar_url" :width="100" />
				</view>
				<view class="user-content u-col-center u-row-between">
					<view class="u-flex-col">
						<view class="u-flex u-m-b-6">
							<!-- 会员昵称 -->
							<view class="nick-name u-m-r-16">{{ userInfo.nick_name }}</view>
							<!-- 会员等级 -->
							<view v-if="userInfo.grade_id > 0 && userInfo.grade" class="user-grade">
								<view class="user-grade_icon">
									<image class="image"
										src="">
									</image>
								</view>
								<view class="user-grade_name">
									<text>{{ userInfo.grade.name }}</text>
								</view>
							</view>
							<!-- 会员无等级时显示手机号 -->
							<view v-else class="mobile">{{ userInfo.mobile }}</view>
						</view>
						<view class="u-font-24">
							<text>邀请码：{{ userInfo.user_code }}</text>
							<text class="button" @click="copy(userInfo.user_code)">复制</text>
						</view>
						
					</view>
					<view v-if="istj <= 0" class="btn u-m-r-10 col0E" hover-class="hover-btn" @click.stop="$navTo('pages/join/index')">
						<text>加入团队</text>
					</view>
					<view v-else>上级：{{istj_name}}</view>
				</view>
				<view class="userData">
					<view class="userDataItem">
						{{ userInfo.balance }}
						<view class="text">
							余额
						</view>
					</view>
					<view class="userDataItem" style="color: red;" v-if="userInfo.grade_id > 1" >
						{{ userInfo.h_points }}
						<view class="text" style="color: red;">
							红积分
						</view>
					</view>
					<view class="userDataItem" v-if="userInfo.grade_id == 1" >
						{{ userInfo.points }}
						<view class="text">
							积分
						</view>
					</view>
					<view class="userDataItem" @click="withdrawDepositShow=true">
						<view class="text1">
							提现
						</view>
					</view>
				</view>
			</view>
			<!-- 未登录 -->
			<view v-else class="user-noLogin" @click="handleLogin">
				<view class="user-avatar">
					<avatar-image :width="100" />
				</view>
				<view class="user-content">
					<view class="nick-name">未登录</view>
					<view class="login-tips">点击登录账号</view>
				</view>
			</view>
		</view>

		<!-- 我的订单 -->
		<view class="box">
			<view class="title">
				<text>{{myOrder.title}}</text>
				<!-- <view class="more">
				 全部订单 >
			 </view> -->
			</view>
			<view class="itemArr">
				<view class="item" v-for="(item,index) in myOrder.items" :key="index" @click="onTargetOrder(item)">
					<image :src="`../../static/user/${item.icon}`" class="icon" mode=""></image>
					<text>
						{{item.name}}
					</text>
				</view>
			</view>
		</view>

		<!-- 实用工具 -->
		<view class="box">
			<view class="title">
				<text>{{pragmaticUtil.title}}</text>
			</view>
			<view class="itemArr">
				<view class="item" v-for="(item,index) in pragmaticUtil.items" :key="index" @click="$navTo(item.url)">
					<image :src="`../../static/user/${item.icon}`" class="icon" mode=""></image>
					<text>
						{{item.name}}
					</text>
				</view>
			</view>
		</view>

		<!-- 营销互动 -->
		<view class="marketing box" style="margin-bottom: 150rpx;">
			<view class="title u-m-b-30">
				<text>{{InteractiveMarketing.title}}</text>
			</view>
			<view class="u-flex u-row-between u-col-center u-font-22 u-p-20 sign u-m-b-16"
				@click="$navTo('pages/task/index')" v-if="gradeId == 1">
				<view class="u-font-22 u-flex">
					<image class="icon" src="~@/static/user/jifen.png" mode=""></image>
					<text class="u-m-l-22 u-m-r-10 u-font-28 bold">10积分币</text>
					<text>积分签到</text>
				</view>
				<view class="btn" hover-class="hover-btn" @click.stop="$navTo('pages/task/index')">
					<text>领取</text>
				</view>
			</view>
			<view class="u-flex u-row-between u-col-center u-font-22 u-p-20 sign center u-m-b-16"
				@click="$navTo('pages/distribution/index')" >
				<view class="u-font-22 u-flex">
					<image class="icon" src="~@/static/user/fenxiao.png" mode=""></image>
					<text class="u-m-l-22 u-m-r-10 u-font-28 bold">分销中心</text>
				</view>
				<view class="btn" hover-class="hover-btn">
					<text>查看</text>
				</view>
			</view>
		</view>
		<u-popup v-model="withdrawDepositShow" mode="bottom" border-radius="14" height="700rpx" closeable >
			<view class="po_box">
				<view class="title">
					提现金额
				</view>
				<view class="content" >
					<text>请输入金额</text>
					<view class="input">
						￥ <input style="margin-left: 20rpx;font-weight: 200;" type="number"   v-model="money" @blur="verifyMoney" :border="border" placeholder="请输入金额" />
					</view>
					<view class="tips">当前可提现余额{{ userInfo.balance }},<text @click="money=userInfo.balance">全部提现</text></view>
				</view>
				<view class="btn" @click="submitMoney">
					立即提现
				</view>
			</view>
			
				
		</u-popup>

	</view>
</template>

<script>
	import login from '@/mixins/common.js'
	import store from '@/store'
	import AvatarImage from '@/components/avatar-image'
	import {
		setCartTabBadge
	} from '@/utils/app'
	import SettingKeyEnum from '@/common/enum/setting/Key'
	import SettingModel from '@/common/model/Setting'
	import * as UserApi from '@/api/user'
	import * as OrderApi from '@/api/order'
	import {
		checkLogin
	} from '@/utils/app'

	// 订单操作
	const orderNavbar = [{
			id: 'all',
			name: '全部订单',
			icon: 'qpdingdan'
		},
		{
			id: 'payment',
			name: '待支付',
			icon: 'daifukuan',
			count: 0
		},
		{
			id: 'delivery',
			name: '待发货',
			icon: 'daifahuo',
			count: 0
		},
		{
			id: 'received',
			name: '待收货',
			icon: 'daishouhuo',
			count: 0
		},
	]

	/**
	 * 我的服务
	 * id: 标识; name: 标题名称; icon: 图标; type 类型(link和button); url: 跳转的链接
	 */
	const service = [{
			id: 'address',
			name: '收货地址',
			icon: 'shouhuodizhi',
			type: 'link',
			url: 'pages/address/index'
		},
		{
			id: 'coupon',
			name: '领券中心',
			icon: 'lingquan',
			type: 'link',
			url: 'pages/coupon/index'
		},
		{
			id: 'myCoupon',
			name: '优惠券',
			icon: 'youhuiquan',
			type: 'link',
			url: 'pages/my-coupon/index'
		},
		{
			id: 'help',
			name: '我的帮助',
			icon: 'bangzhu',
			type: 'link',
			url: 'pages/help/index'
		},
		{
			id: 'contact',
			name: '在线客服',
			icon: 'kefu',
			type: 'button',
			openType: 'contact'
		},
		{
			id: 'points',
			name: '我的积分',
			icon: 'jifen',
			type: 'link',
			url: 'pages/points/log'
		},
		{
			id: 'refund',
			name: '退换/售后',
			icon: 'shouhou',
			type: 'link',
			url: 'pages/refund/index'
		},
	]

	export default {
		mixins: [login],
		components: {
			AvatarImage
		},
		data() {
			return {
				money: '',
				withdrawDepositShow: false,
				gradeId: '',
				userId: '',
				is_tjr: '',
				// 枚举类
				SettingKeyEnum,
				// 当前运行的终端 (此处并不冗余,因为微信小程序端view层无法直接读取$platform)
				$platform: this.$platform,
				// 正在加载
				isLoading: true,
				// 是否已登录
				isLogin: false,
				// 系统设置
				setting: {},
				// 当前用户信息
				userInfo: {},
				// 账户资产
				assets: {
					balance: '--',
					points: '--',
					coupon: '--'
				},
				// 我的服务
				service,
				// 订单操作
				orderNavbar,
				// 当前用户待处理的订单数量
				todoCounts: {
					payment: 0,
					deliver: 0,
					received: 0
				},
				myOrder: {
					title: '我的订单',
					items: [{
							id: 'all',
							name: '全部订单',
							icon: 'all.png',
							url: '',
						},
						{
							id: 'payment',
							name: '未支付',
							icon: 'nopay.png',
							url: '',
						},
						{
							id: 'received',
							name: '已支付',
							icon: 'pay.png',
							url: '',
						},
						{
							id: 'comment',
							name: '已完成',
							icon: 'finish.png',
							url: '',
						},
					]
				},
				pragmaticUtil: {
					title: '实用工具',
					items: [{
							id: '',
							name: '地址管理',
							icon: 'addr.png',
							url: 'pages/address/index',
						},
						{
							id: '',
							name: '会员中心',
							icon: 'member.png',
							url: 'pages/member/index',
						},
						{
							id: '',
							name: '每日推荐',
							icon: 'share.png',
							url: 'pages/share/index',
						},
					]
				},
				InteractiveMarketing: {
					title: '营销互动',
					items: [{
							img: '../../static/item1.png',
						},
						// {
						// 	img:'../../static/item2.png',
						// },
						{
							img: '../../static/item3.png',
							url: 'pages/distribution/index'
						},
					]
				},
				userInfo: {

				},
				istj: 0,
				istj_name: ''

			}
		},

		/**
		 * 生命周期函数--监听页面显示
		 */
		onShow(options) {
			this.onRefreshPage()
		},
		onLoad(options) {
			this.inviteUser()
			this.userInfo = uni.getStorageSync('userInfo')
			if (this.userInfo) {
				this.isLogin = true
			}
			this.init()
			// this.getInfo()
		},
		methods: {
			
			init(){
				this.myhttp({
					url: '?s=/api/User/getTjrUserInfo',
				}).then(res => {
					if(res.data.is_tjr == 1){
						this.istj_name = res.data.data.nick_name
					}
					this.istj = res.data.is_tjr
				})	
			},
			inviteUser() {
				let params = {
					is_tjr: 0
				}
				UserApi.inviteuser(params).then(res=> {
					if(res.ret == 200) {
						console.log("请求成功！")
						this.istjr = res.is_tjr
					}
				})
			},
			// goTabbarPage(){
			// 	uni.switchTab({
			// 		url:'/pages/distribution/index',
			// 	})
			// },
			async getInfo() {
				await this.myhttp({
					url: '?s=/api/User/info',
				}).then(res => {
					if (res.data.message == 'success') {
						console.log(res.data.data.userInfo.grade_id)
						this.gradeId = res.data.data.userInfo.grade_id
						this.userInfo = res.data.data.userInfo
						this.userId  = res.data.data.userInfo.user_id
						uni.setStorageSync('userInfo', res.data.data.userInfo);
					}
				})
			},
			verifyMoney(){
				console.log(this.money);
			},
			//提现
			submitMoney(){
				if(!this.money){
					this.$toast("请输入金额")
					return 
				}
				if(!Math.floor(this.money/100)) {
					return
				}
				this.myhttp({
					url:'?s=/api/user/addWithdrawal',
					data:{
						price : this.money
					}
				}).then(res=>{
					console.log(res);
					if(res.data.message=="操作成功"){
						UserApi.info().then(res1 => {
							uni.setStorageSync('userInfo', res1.data.data.userInfo)
							this.user = uni.getStorageSync('userInfo')
							this.money = ''
							uni.showToast({
								icon:'success',
								duration: 2000,
								title:'提现成功'
							})
							setTimeout(()=>{
								this.withdrawDepositShow = false
							},1500)
						})
					}else{
						uni.showToast({
							icon:'error',
							duration: 2000,
							title:'提现失败'
						})
					}
					
				})
			},
			//复制
			copy(user_id) {
				console.log(user_id)
				uni.setClipboardData({
					data: JSON.stringify(user_id),
					success() {
						console.log('设置复制内容成功')
					},
					fail() {
						console.log('设置复制内容失败')
					}
				}),
				
				uni.getClipboardData({
					success(res) {
						console.log(res.data);
					},
					fail() {
						console.log('复制失败。')
					}
				})
			},
			// 刷新页面
			onRefreshPage() {
				// 更新购物车角标
				setCartTabBadge()
				this.getInfo()
				// 判断是否已登录
				// this.isLogin = checkLogin()
				// 获取页面数据
				// this.getPageData()
			},

			// 获取页面数据
			getPageData(callback) {
				const app = this
				app.isLoading = true
				Promise.all([app.getSetting(), app.getUserInfo(), app.getUserAssets(), app.getTodoCounts()])
					.then(result => {
						app.isLoading = false
						// 初始化我的服务数据
						app.initService()
						// 初始化订单操作数据
						app.initOrderTabbar()
						// 执行回调函数
						callback && callback()
					})
					.catch(err => {
						console.log('catch', err)
					})
			},

			// 初始化我的服务数据
			initService() {
				const app = this
				const newService = []
				service.forEach(item => {
					if (item.id === 'points') {
						item.name = '我的' + app.setting[SettingKeyEnum.POINTS.value].points_name
					}
					newService.push(item)
				})
				app.service = newService
			},

			// 初始化订单操作数据
			initOrderTabbar() {
				const app = this
				const newOrderNavbar = []
				orderNavbar.forEach(item => {
					if (item.hasOwnProperty('count')) {
						item.count = app.todoCounts[item.id]
					}
					newOrderNavbar.push(item)
				})
				app.orderNavbar = newOrderNavbar
			},

			// 获取商城设置
			getSetting() {
				const app = this
				return new Promise((resolve, reject) => {
					SettingModel.data().then(setting => {
						app.setting = setting
						resolve(setting)
					}).catch(reject)
				})
			},

			// 获取当前用户信息
			getUserInfo() {
				const app = this
				return new Promise((resolve, reject) => {
					!app.isLogin ? resolve(null) : UserApi.info()
						.then(result => {
							app.userInfo = result.data.userInfo
							resolve(app.userInfo)
						})
						.catch(err => {
							if (err.result && err.result.status == 401) {
								app.isLogin = false
								resolve(null)
							} else {
								reject(err)
							}
						})
				})
			},

			// 获取账户资产
			getUserAssets() {
				const app = this
				return new Promise((resolve, reject) => {
					!app.isLogin ? resolve(null) : UserApi.assets()
						.then(result => {
							app.assets = result.data.assets
							resolve(app.assets)
						})
						.catch(err => {
							if (err.result && err.result.status == 401) {
								app.isLogin = false
								resolve(null)
							} else {
								reject(err)
							}
						})
				})
			},

			// 获取当前用户待处理的订单数量
			getTodoCounts() {
				const app = this
				return new Promise((resolve, reject) => {
					!app.isLogin ? resolve(null) : OrderApi.todoCounts()
						.then(result => {
							app.todoCounts = result.data.counts
							resolve(app.todoCounts)
						})
						.catch(err => {
							if (err.result && err.result.status == 401) {
								app.isLogin = false
								resolve(null)
							} else {
								reject(err)
							}
						})
				})
			},

			// 跳转到登录页
			handleLogin() {
				!this.isLogin && this.commonGetwxCode().then(res => {
					this.getInfo()
					this.isLogin = !this.isLogin
				})
			},

			// 退出登录
			handleLogout() {
				const app = this
				uni.showModal({
					title: '友情提示',
					content: '您确定要退出登录吗?',
					success(res) {
						if (res.confirm) {
							store.dispatch('Logout', {})
								.then(result => app.onRefreshPage())
						}
					}
				})
			},

			// 跳转到钱包页面
			onTargetWallet() {
				this.$navTo('pages/wallet/index')
			},

			// 跳转到订单页
			onTargetOrder(item) {
				this.$navTo('pages/order/index', {
					dataType: item.id
				})
			},

			// 跳转到我的积分页面
			onTargetPoints() {
				this.$navTo('pages/points/log')
			},

			// 跳转到分销中心
			onTargetDistribution() {
				this.$navTo('pages/distribution/index')
			},

			// 跳转到服务页面
			handleService({
				url
			}) {
				this.$navTo(url)
			},

		},

		/**
		 * 下拉刷新
		 */
		onPullDownRefresh() {
			// 获取首页数据
			this.getPageData(() => {
				uni.stopPullDownRefresh()
			})
		},
		


	}
</script>

<style lang="scss" scoped>
	
	.btn {
		min-width: auto;
		padding: 8upx 36upx;
		background: #DBB479;
		box-shadow: 0upx 5upx 8upx 0upx rgba(51, 119, 255, 0.16);
		border-radius: 46upx;
		color: #FFFFFF;
	}
	.col0E {
		background: #0e0e0e;
	}
	.container {
		background-color: #F5F6FA;
		width: 100%;

		.box {
			&:last-child .itemArr {
				display: flex;
				flex-wrap: wrap;

				.item {
					height: auto;
				}

				.img {
					flex: 1;
					margin-top: 10rpx;

					image {
						height: 120rpx;
						// width: auto;
					}
				}
			}

			background-color: #fff;
			border-radius: 10rpx;
			margin: 36rpx 26rpx 20rpx;
			padding: 20rpx;
			width: auto;

			.title {
				display: flex;
				align-items: center;
				justify-content: space-between;

				text {
					font-size: 28rpx;
					font-weight: 600;
					color: #222222;
				}

				.more {
					color: #909090;
					font-size: 22rpx;
				}
			}

			.itemArr {
				display: flex;
				justify-content: space-around;

				.item {
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					flex-wrap: wrap;
					height: 130rpx;

					.icon {
						width: 40rpx;
						height: 40rpx;
						margin-top: 20rpx;

						image {
							width: 100%;
						}
					}

					text {
						margin-top: 20rpx;
						color: #575757;
						font-size: 22rpx;
						white-space: nowrap;
					}
				}
			}
		}
	}



	// 页面头部

	.main-header {
		background: linear-gradient(45deg, #1C1C1C, #767676);
		position: relative;
		width: 100%;
		background-size: 100% 100%;
		display: flex;
		align-items: center;
		padding-top: 100rpx;

		.bg-image {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			z-index: 0;
		}

		.user-info {
			display: flex;
			flex-wrap: wrap;
			width: 100%;
			z-index: 1;

			.user-avatar {
				display: flex;
				align-items: center;
				height: 220rpx;
				padding-left: 30rpx;
				width: 20%;
			}

			.user-content {
				display: flex;
				// flex-direction: column;
				// justify-content: center;
				width: 80%;
				color: #fff;

				.nick-name {
					font-size: 32rpx;
					font-weight: bold;
				}

				.mobile {
					margin-top: 15rpx;
					font-size: 26rpx;
				}

				.user-grade {
					display: flex;
					align-items: center;
					// background: #3c3c3c;
					// border-radius: 10rpx;
					padding: 4rpx 12rpx;

					.user-grade_icon .image {
						display: block;
						width: 32rpx;
						height: 32rpx;
					}

					.user-grade_name {
						margin-left: 5rpx;
						font-size: 24rpx;
						color: #EEE0C3;
					}

				}
				.button {
					border-radius: 10upx;
					margin-left: 20upx;
					padding-left: 10upx;
					padding-right: 10upx;
					background-color: #FFFFFF;
					color: #000000;
				}
				.login-tips {
					margin-top: 12rpx;
					font-size: 28rpx;
				}
			}

			.userData {
				display: flex;
				width: 100%;
				height: 100rpx;
				padding-bottom: 30rpx;

				.userDataItem {
					flex: 1;
					display: grid;
					place-items: center;
					color: #fff;
					font-size: 32rpx;

					.text {
						font-size: 24rpx;
						color: #9F9F9F;
					}
					.text1 {
						font-size: 32rpx;
						color: #9F9F9F;
					}
				}
			}
		}

		.user-noLogin {
			display: flex;
			flex-wrap: wrap;
			width: 100%;
			z-index: 1;
			align-items: center;

			.user-avatar {
				display: flex;
				align-items: center;
				height: 220rpx;
				padding-left: 30rpx;
				width: 20%;
			}

			.user-content {
				color: #fff;
			}
		}
	}

	// 营销活动
	.marketing {
		.sign {
			background: #DEF4FE;
			border-radius: 5upx;
			color: #35C0FE;
		}

		.center {
			background: #F7EEFE;
			color: #CC91FA;
		}

		.btn {
			min-width: auto;
			padding: 8upx 36upx;
			background: #DBB479;
			box-shadow: 0upx 5upx 8upx 0upx rgba(51, 119, 255, 0.16);
			border-radius: 46upx;
			color: #FFFFFF;
		}

		.hover-btn {
			background-color: rgba(0, 0, 0, .1);
		}

		.bold {
			font-weight: bold;
		}

		.icon {
			width: 74upx;
			height: 74upx;
		}
	}
	.po_box{
		display: flex;
		flex-direction: column;
		align-items: center;
		height: 600rpx;
		.title{
			font-size: 32rpx;
			margin: 40rpx 0;
			font-weight: 600;
			color: #302e2e;
		}
		.content{
			flex: 1;
			width: 95%;
			margin-bottom: 30rpx;
			box-shadow: 0px 0px 15rpx #0005;
			padding: 20rpx;
			border-radius: 15rpx;
			text{
				
			}
			.input{
				display: flex;
				align-items: center;
				margin: 50rpx 0;
				font-size: 32rpx;
				font-weight: 600;
			}
			.tips{
				text{
					color: #2878ff;
				}
			}
		}
		
		.btn{
			background-color: #302e2e;
			color: #fff;
			font-size: 32rpx;
			border-radius: 35rpx;
			width: 200rpx;
			height: 70rpx;
			display: grid;
			place-items: center;
		}
		
		
	}
</style>
